<link rel="stylesheet" type="text/css" href="/site_media/css/Title_white.css" /><link href="/media/css/jquery.wysiwyg.css" rel="stylesheet" type="text/css" />
<link href="/media/css/form.css" rel="stylesheet" type="text/css" />
<link href="/media/css/Title_white.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
</script>



{% extends 'base.html' %}
{% block title %} - New Project{% endblock %}

{% block js %}
<script type="text/javascript" src="/site_media/js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="/site_media/js/jquery.wysiwyg.js"></script>
<link rel="stylesheet" href="/site_media/css/jquery.wysiwyg.css" type="text/css" />
<script type="text/javascript">
	$(function()
	{
		$('#wysiwyg').wysiwyg();
	});
</script>
{% endblock %}

{% block onload %}
onload="document.getElementById('p_name').focus();"
{% endblock %}

{% block content %}

<script>
	var cids = new Array();
	var youtube_moods = new Array();

	function showlayer(name){
		var subitem=document.getElementById(name+"_layer");
		if(subitem.style.display=='none'){
			subitem.style.display='';
		}else{
			subitem.style.display='none';
		}
	}

	function add_moods(){
		var str = document.getElementById("youtube").value;
		if (str=="") return false;
		var s = str.split('&');
		var sid = s[0].split("v=");

		for (var i=0;i<youtube_moods.length;i++){
			if (youtube_moods[i] == sid[1]) return false
		}
		youtube_moods.push(sid[1]);
		i_html= "<input type=\"checkbox\" checked=\"true\" name=\"moods\" value=\""+
			sid[1]+"\" /><a href='"+s[0]+"'>YouTube_"+[i]+"</a><br/>";

		document.getElementById('mood_div').innerHTML +=  i_html;
		return false;
	}

	/* Check whether fhr form is valid, name has been inputed. */
	function check_form(_form){
		if (_form.p_name.value == ""){
			alert("Please input project name!");
			_form.p_name.focus();
			return false;
		}
		
		var obj=document.getElementsByName('client');
		for(i=0;i<obj.length;i++){
			if(obj[i].checked){
				return true;
			}
		}

		if(_form.username.value==''){
			alert("Please input user name!");
			_form.username.focus();
			return false;
		}

		if(_form.email.value==''){
			alert("Please input email address!");
			_form.email.focus();
			return false;
		}

		if(_form.pwd.value==''){
			alert("Please input password!");
			_form.pwd.focus();
			return false;
		}
		
		return true;
	}

	/* Test whether the file object is pdf, if then goto coordination. */
	function add_coordination(file_obj){
		var fname = file_obj.value.split('.');
		var ftype = fname[fname.length-1];
		if (ftype=='pdf' || ftype=='PDF'){
			document.getElementById('coord_div').innerHTML +=
				"<input type='checkbox' checked='true' value=''/>" +fname+"<br/>";
		}
	}

	function select_artist(){
		
		var a = window.open("/project/select/artist/", null, 'resizable=no, scrollbars=yes, height=580, width=650, top=10, left=10');
	}
	
	
	function add_video() {
		if (file == ""){
			var file=1;}
		else{
		var file = file++;
		}
    			document.getElementById('video_layer').innerHTML +=
				"<input name=\"file{{file}}\" type=\"file\" onchange=\"return add_coordination(this);\" >Note:<input name=\"desc{{file}}\" type=\"text\"> <br/>";
}

</script>
<div id="content" style="position:absolute; top:20px; left:0px; width:610px; height:relative; background-color: #1A1A1A; layer-background-color: #1A1A1A; border: 1px none #000000;">


<form name="form1" enctype="multipart/form-data" method="post" action="/project/new/" onsubmit="return check_form(this);">
	

<table width="610">
<tr>
	<td colspan="2"><p><span style="font-size:14px;color:#CCC">Create new project</span></p></td>
	  </tr>
		<tr>
			<td colspan="2">1. Add project name</td>
	  </tr>
		<tr>
			<td colspan="2"><input name="p_name" id="p_name" type="text"></td>
		</tr>
		<tr>
			<td colspan="2">2. Add description</td>
	  </tr>
		<tr>
			<td colspan="2"><textarea name="description" id="wysiwyg" rows="10" cols="70">Thank you for letting us pitch on this great Job!</textarea></td>
		</tr>
		<tr>
			<td colspan="2">3. Select artists <a href="#" onclick="select_artist();">Open search</a><a href="#" onclick="select_artist();"><br/><br/></a>
				<div id="select_artist" name="select_artist" style="position:absolution;margin-left:10px;">
				</div>
		  </td>
		</tr>
		<tr>
			<td colspan="2">4. Moods/References<a href="#" onclick="showlayer('attach');"><br/></a><br>
                    Upload file: <br />
 
        </td></tr>
        <tr><td colspan="2">
				{% for file in files %}<br />
				<input name="file{{file}}" type="file" onchange="return add_coordination(this);" >
			Note<input name="desc{{file}}" type="text">
					{% endfor %}
        
        </td></tr>
        
            
        <tr><td>        
                    YouTube link: <br />
                    <input name="youtube" id="youtube" type="text"/>
          <input type="button" onclick="return add_moods();" value="Add link"/>
                    
		</td>
        <td>
					<div id="mood_div"></div>
		</td>
  </tr>
		<tr>
			<td><a href="#" onclick="showlayer('client');">5. Select client</a>
            </td>
            <td>
				<a href="#"  onclick="MM_openBrWindow('/user/new/','','width=600,height=400')">Create new</a><br/>
          </td></tr>
            <tr><td> 
           

				{% for client in clients %}
				<input type="radio" name="client" value="{{client.id}}"/>
				<a href="/user/{{client.id}}/" target="_blank">
				{{client.first_name}} 
				</a> <br>
				{% endfor %}
                </td>
                <td>
					<table>
						<tr><td>Username:</td><td> <input name="username" type="text" /> </td></tr>
						<tr><td>Password:</td><td> <input name="pwd" type="password" /></td></tr>
						<tr><td>Company:</td><td> <input name="first_name" type="text" /></td></tr>
						<tr><td>City:</td><td><input name="last_name" type="text" /> </td></tr>
						<tr><td>Email:</td><td> <input name="email" type="text" /></td></tr>
					</table>
		  </td>
		</tr>
		<tr>
			<td></td>
			<td><input type="submit" value="Create"/></td>
		</tr>
	</table>

</form>
</div>


{% endblock %}
